<template>
  <div style="padding: 16px">
    <div class="bg-white list-grid">
      <BasicForm @register="registerForm" @submit="handleSubmit" />
    </div>
    <List :data="data" @preview="handlePreview" />
    <visualListModal v-model="showPreview" :title="title">
      <div style="margin: auto"><Image :src="path" :preview="false" /></div>
    </visualListModal>
  </div>
</template>
<script lang="ts" name="visualList">
  import { defineComponent, ref } from 'vue';
  import { Image } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';

  import visualListModal from './visualListModal.vue';
  import List from './list.vue';

  import { searchFormSchema, dataSource } from './visual-list.data';

  export default defineComponent({
    name: 'PostManagement',
    components: {
      BasicForm,
      List,
      Image,
      visualListModal,
    },
    setup() {
      const data = ref(dataSource);
      const path = ref('');
      const showPreview = ref(false);
      const title = ref('');

      const [registerForm] = useForm({
        schemas: searchFormSchema,
        labelWidth: 40,
        actionColOptions: {
          span: 18,
        },
        resetFunc: async () => {
          data.value = dataSource;
        },
      });

      const handlePreview = (item: any) => {
        path.value = item.src;
        title.value = item.title;
        showPreview.value = true;
      };

      const handleSubmit = (values: any) => {
        console.log(values);
        if (!values.title) {
          data.value = dataSource;
          return;
        }
        data.value = dataSource.filter((i) => i.title?.indexOf(values.title) !== -1);
      };

      return {
        registerForm,
        handleSubmit,
        handlePreview,
        data,
        showPreview,
        path,
        title,
      };
    },
  });
</script>

<style scoped lang="less">
  :deep(.ant-card-body) {
    padding: 16px;
  }

  :deep(.ant-image) {
    display: block;
  }

  :deep(.list-grid) {
    .ant-form {
      width: 100%;
      padding: 12px 10px 6px;
      margin-bottom: 8px;
      background-color: #fcfcfc;
      border-radius: 4px;

      .ant-form-item {
        margin-bottom: 8px !important;
      }
    }
  }
</style>
